<style lang="scss" scoped>
.gary-bgc-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  background-color: $gary-bgc;
}
.container {
  margin: 10px 0;
}
.container:last-child {
  margin-bottom: 20px;
}
</style>

<template>
  <navbar :list="navbar_list"></navbar>

  <el-row :gutter="10" class="gary-bgc-container">
    <el-col :span="7" v-for="item in card_num" class="container">
      <img_frame :index="item - 1"></img_frame>
    </el-col>
  </el-row>
</template>
<script setup>
import request from '../../utils/axios';
import img_frame from './3-img-frame/index.vue';
import navbar from '../index/navbar/index.vue';
import { onMounted, ref } from 'vue';

const navbar_list = ['题材', '风格', '设备', '地区'];

// 拿到服务器上图片的数量
let card_num = ref(1);
onMounted(async () => {
  await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1371,
    },
  }).then((res) => {
    card_num.value = Math.floor(res.data.Carousels.length / 3);
  });
});
</script>
